<template>
	<div class="block text-center" index="/lunbo">
	    <el-carousel height="200px" motion-blur>
		  <el-carousel-item v-for="(image, index) in images" :key="index">
		          <img :src="image.src" :alt="image.alt" 
				  style="width: 100%; height: auto;
				  object-fit: cover">
		          <h3 class="small justify-center" text="2xl">{{ image.caption }}</h3>
		        </el-carousel-item>
	    </el-carousel>
	</div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
	const images = ref([
	  { src: '../src/assets/images/1-1.jpg', alt: 'First Image', caption: '1' },
	  { src: '../src/assets/images/1-2.jpg', alt: 'Second Image', caption: '2' },
	  { src: '../src/assets/images/1-3.jpg', alt: 'Third Image', caption: '3' },
	  { src: '../src/assets/images/1-4.jpg', alt: 'Fourth Image', caption: '4' },
	  { src: '../src/assets/images/3.jpg', alt: 'Third Image', caption: '3' },
	  { src: '../src/assets/images/4.jpg', alt: 'Fourth Image', caption: '4' },
	]);
</script>

<style lang="scss">
	
	.demonstration {
	  color: var(--el-text-color-secondary);
	}
	.el-carousel{
		height: 500px;
	}
	.carousel-image {
	  width: 100%;       /* 设置图片宽度为100% */
	  height: auto;      /* 高度自适应 */
	  object-fit: cover; /* 调整图片以覆盖整个容器，同时保持图片的宽高比 */
	}
	.el-carousel__item h3 {
	  color: #475669;
	  opacity: 0.75;
	  line-height: 200px;
	  margin: 0;
	  text-align: center;
	  height: 500px;
	}
	
	.el-carousel__item:nth-child(2n) {
	  background-color: #99a9bf;
	  height: 500px;
	}
	
	.el-carousel__item:nth-child(2n + 1) {
	  background-color: #d3dce6;
	  height: 500px;
	}
</style>